<template>
  <div class="PDF box">
    <div class="btn_goback" @click="goBack">
      <span>{{ lang === "en" ? "Back" : "返 回" }}</span>
    </div>
    <div class="PDFbox" id="PDFcont"></div>
  </div>
</template>
<script>
import Pdfh5 from "pdfh5";
import { Toast } from "vant";
export default {
  data() {
    return {
      id: "",
      pdfh5: null,
      lang: "",
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.lang = this.$route.query.lang;
  },
  mounted() {
    this.pdfh5 = new Pdfh5("#PDFcont", {
      pdfurl: this.$route.query.url, // pdf地址
      URIenable: true, // 开启地址栏file参数
      // lazy: true, // 是否开启懒加载
    });
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 0,
      overlay: true,
    });
    //监听完成事件
    this.pdfh5.on("complete", function (status, msg, time) {
      Toast.clear();
      console.log(
        "状态：" +
          status +
          "，信息：" +
          msg +
          "，耗时：" +
          time +
          "毫秒，总页数：" +
          this.totalNum
      );
    });
  },
  methods: {
    goBack() {
      this.$router.replace({
        path: `/${this.lang}/download`,
        query: { id: this.id },
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "pdfh5/css/pdfh5.css";
.PDF {
  font-size: 1.7rem;
  .btn_goback {
    display: table;
    background: #22a0d4;
    color: #fff;
    border-radius: 2rem;
    padding: 0.3rem 2rem;
    align-self: flex-start;
    margin: 4rem 0 2rem 2.5rem;
    padding: 0.3rem 3rem;
  }
  .PDFbox {
    height: calc(100% - 6rem - 50px);
  }
}
</style>
